<template>
  <div class="container">
    <div>
      <el-row type="flex" :gutter="10" justify="space-between">
        <el-col :span="4">
          <el-form ref="form" :model="formQuery" label-width="100px">
            <el-form-item label="月份：" style="width: 250px">
              <el-date-picker
      v-model="formQuery.cyclesValue"
      type="month"
      placeholder="选择月">
    </el-date-picker>
              <!-- <el-select
                v-model="formQuery.cyclesValue"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in formQuery.timeCycles"
                  :key="item.index"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="被考核单位：" style="width: 250px">
              <el-select
                v-model="formQuery.groupingValue"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in formQuery.groupingList"
                  :key="item.index"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" style="margin-left: ">
            <el-button size="mini" type="primary" @click="searchAction"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>

    </div>
    <el-table
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
   <!-- 、所属组（可以没有，根据1.3设置来）、 -->
      
        <el-table-column
        prop="NAME"
        label="考评人员"
        align="center"
      ></el-table-column>
      <el-table-column
          label="被考核单位"
          align="center"
        >东丽博德尔</el-table-column>
        <el-table-column
        prop="SCORE"
          label="组织机构"
          align="center"
        ></el-table-column>
<el-table-column
        prop="Time"
        label="考核日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ITEM"
        label="考核项目"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="TYPE"
        label="考核类型"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="考核详情" :visible.sync="dialog1.show" width="50%">
      <el-table :data="dialog1.data">
        <el-table-column
          prop="ID"
          label="任务编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="OBJECT"
          label="被考核对象"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SCORE"
          label="分数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="MINUS"
          label="扣分"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 弹出框 -->
    <!-- 考核对象概要，考核具体内容、抽样条件（是否要？）、创建日期
鼠标触碰考核对象概要，还能显示考核对象等详情 -->
    <el-dialog title="任务详情" :visible.sync="dialog2.show" width="50%">
      <el-table :data="dialog2.data">

        <el-table-column
          prop="OBJECT"
          label="被考核对象概要"
          align="center"
        ><template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.OBJECTLIST }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.OBJECT }}</el-tag>
              </div>
            </el-popover>
          </template></el-table-column>
        <el-table-column
          prop="MINUS"
          label="抽样条件"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="InTime"
          label="创建日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TITLE"
          label="考核标准"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.TITLE1 }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.TITLE }}</el-tag>
              </div>
            </el-popover>
          </template></el-table-column
        >
        <!-- <el-table-column
          prop="CONTENT"
          label="扣分描述"
          align="center"
        ></el-table-column> -->
        
        <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit1(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column> -->
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span> -->
    </el-dialog>

    <el-dialog
      title="图片展示"
      :visible.sync="formImage.show"
      width="30%"
      :before-close="closeImage"
    >
      <el-image
        style="width: 100%; height: 100%"
        :src="formImage.src"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      formImage: {
        show: false,
        src: [],
      },
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formQuery: {
        groupingValue: '',
        groupingList: [],
        cyclesValue: '日',//车牌号
        timeCycles: [{
          value: '日',
        },{
          value: '月',
        }, {
          value: '季',
        }, {
          value: '年',
        }],
        typeValue: '全部',
        typeList: [{
          value: '全部',
        }, {
          value: '机扫水洗作业道路',
        }, {
          value: '机扫水洗作业车辆',
        }, {
          value: '人工保洁作业道路',
        }, {
          value: '人工保洁作业工人',
        }, {
          value: '公厕',
        }, {
          value: '垃圾车',
        }, {
          value: '垃圾点',
        }, {
          value: '垃圾转运站',
        }, {
          value: '垃圾处理厂',
        }],
        itemValue: '全部',
        itemList: [{
          value: '全部',
        }, {
          value: '机扫道路保洁',
        }, {
          value: '人工道路保洁',
        }, {
          value: '垃圾收运',
        }, {
          value: '公厕保洁',
        }],
      },
      // form: {
      //   queryType: '日常检查',
      //   queryTypeList:[],
      //   distance: 500,
      //   groupingList: [],
      //   groupingValue: '',
      //   // 月、季、年


      //   // hourList: [{
      //   //   value: '0',
      //   //   label: '0时'
      //   // }, {
      //   //   value: '1',
      //   //   label: '1时'
      //   // }, {
      //   //   value: '2',
      //   //   label: '2时'
      //   // }, {
      //   //   value: '3',
      //   //   label: '3时'
      //   // }, {
      //   //   value: '4',
      //   //   label: '4时'
      //   // }, {
      //   //   value: '5',
      //   //   label: '5时'
      //   // }, {
      //   //   value: '6',
      //   //   label: '6时'
      //   // }, {
      //   //   value: '7',
      //   //   label: '7时'
      //   // }, {
      //   //   value: '8',
      //   //   label: '8时'
      //   // }, {
      //   //   value: '9',
      //   //   label: '9时'
      //   // }, {
      //   //   value: '10',
      //   //   label: '10时'
      //   // }, {
      //   //   value: '11',
      //   //   label: '11时'
      //   // }, {
      //   //   value: '12',
      //   //   label: '12时'
      //   // }, {
      //   //   value: '13',
      //   //   label: '13时'
      //   // }, {
      //   //   value: '14',
      //   //   label: '14时'
      //   // }, {
      //   //   value: '15',
      //   //   label: '15时'
      //   // }, {
      //   //   value: '16',
      //   //   label: '16时'
      //   // }, {
      //   //   value: '17',
      //   //   label: '17时'
      //   // }, {
      //   //   value: '18',
      //   //   label: '18时'
      //   // }, {
      //   //   value: '19',
      //   //   label: '19时'
      //   // }, {
      //   //   value: '20',
      //   //   label: '20时'
      //   // }, {
      //   //   value: '21',
      //   //   label: '21时'
      //   // }, {
      //   //   value: '22',
      //   //   label: '22时'
      //   // }, {
      //   //   value: '23',
      //   //   label: '23时'
      //   // }, {
      //   //   value: '24',
      //   //   label: '24时'
      //   // }],
      //   alermTypeList: [{ label: '1分钟', value: '1' }, { label: '5分钟', value: '5' }, { label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }],
      //   alermTypeValue: '5',
      //   StartDate: '0',
      //   EndDate: new Date().getHours().toString(),
      // },
      originalData: [],
      tableData: [],
      dialog1: {
        show: false,
        data: [
          { "ID": "20158", "OBJECT": "公厕1", "SCORE": "10", "MINUS": "-8" },
          { "ID": "20158", "OBJECT": "公厕2", "SCORE": "10", "MINUS": "-6" },
          { "ID": "20158", "OBJECT": "公厕4", "SCORE": "10", "MINUS": "0" },
          { "ID": "20158", "OBJECT": "公厕8", "SCORE": "10", "MINUS": "-6" },]
      },
      dialog2: {
        show: false,
        data: [
          {
            "ID": "20158", "InTime": "2024/8/15", "OBJECT": "公厕1, 公厕2...","OBJECTLIST": "公厕1, 公厕2, 公厕3, 公厕4, 公厕5", "SCORE": "10", "MINUS": "黑名单", "TITLE": "七净六无"
            , "TITLE1": "公共卫生间室内应保持干净整洁，达到“七净六无”。七净：墙壁净、窗口净、玻璃净、地板净、蹲位净、尿池净、内部设施净。六无：无乱写乱画、无尿锈臭味、无污物、无蝇虫、无蜘蛛网、吊灰，内外无积水"
            , "CONTENT": "地板有积水，有蛛网，有吊灰"
          },
          {
            "ID": "20158", "InTime": "2024/8/15", "OBJECT": "公厕3, 公厕4...","OBJECTLIST": "公厕3, 公厕4, 公厕7, 公厕9, 公厕12", "SCORE": "10", "MINUS": "黑名单", "TITLE": "乱堆乱放"
            , "TITLE1": "公厕管理间及公厕内不允许堆放与公厕无关的物品，保洁工具不得乱摆放，乱晾晒"
            , "CONTENT": "抹布乱晾晒"
          },
          {
            "ID": "20158", "InTime": "2024/8/16", "OBJECT": "公厕5, 公厕6...","OBJECTLIST": "公厕5, 公厕6, 公厕8, 公厕9, 公厕15", "SCORE": "10", "MINUS": "上次考核不达标", "TITLE": "标志完整"
            , "TITLE1": "标志灯箱不亮"
            , "CONTENT": "公共卫生间标志应醒目完整，并有亮化设备，公厕内外墙不得有小广告，外墙应定期清洗"
          },
          {
            "ID": "20158", "InTime": "2024/8/16", "OBJECT": "公厕7, 公厕8...","OBJECTLIST": "公厕7, 公厕8, 公厕13, 公厕14, 公厕15", "SCORE": "10", "MINUS": "上次考核不达标", "TITLE": "标志完整"
            , "TITLE1": "墙面有小广告"
            , "CONTENT": "公共卫生间标志应醒目完整，并有亮化设备，公厕内外墙不得有小广告，外墙应定期清洗"
          },]
      },
      loading: false,
      URLByTYPE: 'Worker'
    }
  },
  created () {
  },
  mounted () {
    this.getGroupingList()
  },
  methods: {
    //获取人员分组列表
    async getGroupingList () {
      var url = this.URLByTYPE + '/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.formQuery.groupingList = data
      this.formQuery.groupingValue = data[0].CLIENT_NO

      this.getlistdata();
    },
    async getlistdata () {
      this.currentPage = 1;
      this.tableData = [
        { "ID": "20157","OBJECT1": "公厕1, 公厕2...", "SCORE": "考评一组", "SOURCE": "日常检查上报", "NAME": "王静", "AREA": "南开区", "TYPE": "日常检查", "STATE": "不合格", "RETURN": "是", "ITEM": "人工道路保洁", "OBTYPE": "机扫水洗作业道路", "TITLE": "道路积尘", "CONTENT": "道路脏", "Time": "2024/8/28", "InTime": "2024/8/30", "OutTime": "2024/9/05", "Image1": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300542230.jpg", "Image2": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300542241.jpg", "PointIP": "192.168.1.5", "PointName": "", "InTime1": "2024/8/30 17:42:34", "POINTID": "19", "POINTNAME": "华明镇工地" },
        { "ID": "20156","OBJECT1": "公厕1, 公厕2...", "SCORE": "考评一组", "SOURCE": "日常检查上报", "NAME": "张伟", "AREA": "东丽区", "TYPE": "日常检查", "STATE": "不合格", "RETURN": "是", "ITEM": "公厕保洁", "OBTYPE": "公厕", "TITLE": "七净六无", "CONTENT": "道路脏", "Time": "2024/8/27", "InTime": "2024/8/30", "OutTime": "2024/9/04", "Image1": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300540590.jpg", "Image2": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300540591.jpg", "PointIP": "192.168.1.5", "PointName": "", "InTime1": "2024/8/30 17:41:09", "POINTID": "19", "POINTNAME": "华明镇工地" },
        { "ID": "20154","OBJECT1": "公厕1, 公厕2...", "SCORE": "考评一组", "SOURCE": "抽查考核上报", "NAME": "王静", "AREA": "南开区", "TYPE": "抽查考核", "STATE": "合格", "RETURN": "否", "ITEM": "垃圾收运", "OBTYPE": "垃圾收运车辆", "TITLE": "混收混运", "CONTENT": "道路脏", "Time": "2024/8/27", "InTime": "2024/8/30", "OutTime": "2024/9/02", "Image1": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300523430.jpg", "Image2": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300523441.jpg", "PointIP": "192.168.1.5", "PointName": "", "InTime1": "2024/8/30 17:23:55", "POINTID": "19", "POINTNAME": "华明镇工地" },
        { "ID": "20153","OBJECT1": "公厕1, 公厕2...", "SCORE": "考评二组", "SOURCE": "12345接入", "NAME": "李牧", "AREA": "河西区", "TYPE": "日常检查", "STATE": "不合格", "RETURN": "是", "ITEM": "垃圾收运", "OBTYPE": "垃圾收运车辆", "TITLE": "混收混运", "CONTENT": "道路脏", "Time": "2024/8/25", "InTime": "2024/8/27", "OutTime": "2024/9/01", "Image1": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300515500.jpg", "Image2": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300515511.jpg", "PointIP": "192.168.1.5", "PointName": "", "InTime1": "2024/8/30 17:16:01", "POINTID": "19", "POINTNAME": "华明镇工地" },
        { "ID": "20151","OBJECT1": "公厕1, 公厕2...", "SCORE": "考评二组", "SOURCE": "日常检查上报", "NAME": "李牧", "AREA": "河西区", "TYPE": "被动接受", "STATE": "不合格", "RETURN": "是", "ITEM": "机扫道路保洁", "OBTYPE": "机扫水洗作业道路", "TITLE": "道路漏扫", "CONTENT": "道路脏", "Time": "2024/8/24", "InTime": "2024/8/26", "OutTime": "2024/8/29", "Image1": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300420350.jpg", "Image2": "http://resource-cl-hb2.oss-cn-beijing.aliyuncs.com/ZP2404300420351.jpg", "PointIP": "192.168.1.5", "PointName": "", "InTime1": "2024/8/30 16:20:47", "POINTID": "19", "POINTNAME": "华明镇工地" },
      ]
      // this.loading = true
      // // var url = 'Vehicle/GetChucheDistance?ClientNo=0000009&StartDate=2&EndDate=8&cartype=全部&juli=0.5&type=1'
      // var url = this.URLByTYPE + '/GetChucheDistanceYL?StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + '&cartype='+this.form.cph+'&juli=' + (this.form.distance / 1000) + '&isHadSnowCar=1&type=' + this.form.queryType + '&ClientNo=' + this.form.groupingValue
      // const { data } = await this.$Http.get(url)
      // data.forEach(element => {
      //   element.currentRatio = (element.CURRENTNUM / element.ALLNUM * 100).toFixed(2) + '%'
      // });
      // // 原始数据
      // this.tableData = data
      // this.loading = false
    },
    // 导出Excel
    exportExcel () {
      let excelName = '当日累计出勤统计'
      var tHeader = ['所属区县', '现有人员数', '出勤人员数', '出勤比率']
      var filterVal = ['GROUPNAME', 'ALLNUM', 'CURRENTNUM', 'currentRatio']
      if (this.form.queryType === '1') {
        tHeader = ['人员类型', '现有人员数', '出勤人员数', '出勤比率']
        filterVal = ['CAR_TYPE', 'ALLNUM', 'CURRENTNUM', 'currentRatio']
      }
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    formatterMinus (row) {
      // row.SCORE.toFixed(parseFloat(6))
      return parseInt(row.PROBLEM0)+parseInt(row.PROBLEM1)+parseInt(row.PROBLEM2)+parseInt(row.PROBLEM3)+parseInt(row.PROBLEM4)+parseInt(row.PROBLEM5)+parseInt(row.PROBLEM6)
    },
    bigImage (row) {
      this.formImage.src = row.Image2
      this.formImage.show = true
    },
    closeImage () {
      this.formImage.show = false;
    },
    //详情
    handleEdit (index, row) {
      this.dialog1.show = true
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    handleEdit2 (index, row) {
      this.dialog2.show = true
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>